<!--
 * @Description: 正文，代办列表
 * @Author: wws1993
 * @Date: 2020-11-25 16:35:01
 * @LastEditTime: 2020-12-09 10:40:06
 * @LastEditors: wws1993
 * @FilePath: \TODO-MANAGER\src\components\ContextModule.vue
-->

<template>
  <div class="content">
    <template v-for="(item, idx) in listGroup">
      <!-- 分栏 -->
      <div class="list" :key="idx" :data-idx="idx">
        <!-- title -->
        <p class="list-title">
          <img class="list-title-icon" :src="item.icon" />
          <el-tag class="list-title-label" size="large" :type="theme">{{item.label}}</el-tag>
        </p>
        <!-- list -->
        <section class="list-items">
          <p class="list-items-weightOp">
            <code @click="setListWeight({idx, weight: 1})" :active="item.currentWeight === 1" high></code>
            <code @click="setListWeight({idx, weight: 2})" :active="item.currentWeight === 2" middle></code>
            <code @click="setListWeight({idx, weight: 3})" :active="item.currentWeight === 3" low></code>
            <code @click="setListWeight({idx, weight: 0})" :active="item.currentWeight === 0" all></code>
          </p>
          <template v-for="(child, childIdx) in item.list">
            <div class="list-items-item"
              :key="childIdx"
              v-show="child.weight === item.currentWeight || item.currentWeight === 0"
              @mousedown="handleMoveItem(child, $event)"
              @click="openManage(child)"
              >
              <code
                :high="child.weight === 1"
                :middle="child.weight === 2"
                :low="child.weight === 3"
              ></code>
              <span>{{child.subject}}</span>
            </div>
          </template>
        </section>
      </div>
    </template>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import { mapState, mapActions } from 'vuex';
import { Prop, Component } from 'vue-property-decorator';

@Component({
  computed: {
    ...mapState({
      theme: (state: any) => state.theme,
      listGroup: (state: any) => state.listGroup,
    }),
  },
  created() {
    this.queryManage();
  },
  methods: {
    ...mapActions(['openManage', 'queryManage', 'setListWeight', 'updateManage']),
    handleMoveItem(item: Manage.Instance) {
      const handle = (event: any) => {
        const curListNode = event.path.filter((k: Element) => k.className === 'list')[0];
        const curIdx = curListNode.dataset.idx;

        if (curIdx !== item.todoStatus) {
          item.todoStatus = curIdx;
          this.updateManage(item);
        }

        document.removeEventListener('mouseup', handle);
      };

      document.addEventListener('mouseup', handle);
    },
  },
})
export default class ContextModule extends Vue {}
</script>
